<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景尺寸</title>

        <style>
            /* background-size属性用来设置背景图片的尺寸
                    background-size：100px 200px；
               值也可以用百分数来设置，表示为盒子宽、高的百分之多少
               需要等比例设置的值，写auto
            */

            .box1 {
                width: 500px;
                height: 300px;
                border: 1px solid #000;
                background-image:  url(sg.jpg);
                /* 背景尺寸 
                   auto表示高随着宽等比例缩放 
                */
                background-size: 300px auto;
                margin-bottom: 10px;
            }

            .box2 {
                width: 500px;
                height: 300px;
                border: 1px solid #000;
                background-image: url(sg.jpg);
                /* 背景尺寸
                   百分比表示设置宽高为盒子宽高的百分之多少
                */
                background-size: 25% 25%;
                margin-bottom: 10px;
            }

                /* contain和cover是两个特殊的background-size的值
                   contain表示将背景图片智能改变尺寸以容纳到盒子里
                   cover表示将背景图片智能改变尺寸以撑满盒子
                */
            .box3 {
                width: 400px;
                height: 300px;
                border: 1px solid #000;
                background-image: url(sg.jpg);
                /* 背景尺寸
                   contain将智能改变图片尺寸以容纳到盒子里 有时会平铺图片
                   加no-repeat可以解决
                */
                background-size:contain;
                background-repeat:no-repeat;
                margin-bottom: 10px;
            }

            .box4 {
                width: 400px;
                height: 300px;
                border: 1px solid #000;
                background-image: url(sg.jpg);
                /* 背景尺寸
                   cover有时不能将图片完整的展现出来
                   但能撑满整个盒子
                */
                background-size: cover;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>
</html>